<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div class="id">
        <p>aaa</p>
        <p>bbb</p>

    </div>
    
    <script>
   const div = document.querySelector('.id');
   const div2 = document.getElementsByClassName('.id')
   console.log('%ctest.html line:18 div', 'color: #007acc;', div);
   console.log('%ctest.html line:18 div2', 'color: #007acc;', div2);
   console.log('%ctest.html line:18 div2', 'color: #007acc;', document.getElementsByTagName('div'));
   console.dir(div)
   const chridren = div.children;
   const nodes = div.childNodes;
   console.log('%ctest.html line:23 chridren', 'color: #007acc;', chridren.forEach);

    </script>
</body>
</html>